<template>
  <div class="shelf-item " :class="{'shelf-item-shadow': data.type == 1 || data.type === 2}" @click="onItemClick">
    <component class="shelf-item-comp" :class="{'is-edit': data.type === 2 && isEditMode}" :is="item" :data="data"></component>
    <!-- 是否选中的小图标 -->
    <div class="icon-selected"
         :class="{'is-selected': data.selected}"
         v-show="isEditMode && data.type === 1"></div>
  </div>
</template>

<script>
  import { storeShelfMixin } from '../../utils/mixin'
  import ShelfBook from './ShelfItemBook'
  import ShelfCategory from './ShelfItemCategory'
  import ShelfAdd from './ShelfItemAdd'
  import { gotoStoreHome } from '../../utils/store'
  export default {
    mixins: [storeShelfMixin],
    props: {
      data: Object
    },
    computed: {
      // 动态加载组件，封装成一个计算属性，然后通过component的is属性来取调取到它相应的组件
      item() {
        return this.data.type === 1 ? this.book : (this.data.type === 2 ? this.category : this.add)
      }
    },
    data() {
    // 将组件传递到变量里，然后根据每个item的type判断决定那个组件动态加载
      return {
        book: ShelfBook,
        category: ShelfCategory,
        add: ShelfAdd
      }
    },
     methods: {
       // 每一个书架列表类型的点击事件
      onItemClick() {
        if (this.isEditMode) {
          // 一旦点击这个元素，我们就将data的selected，取反选中的变为补选中，不选中的变为选中
          this.data.selected = !this.data.selected
          if (this.data.selected) {
            // 将选中的元素加入选中列表中，直接push（）会出现重复，希望增加的元素不要出现重复，在boost.js定义这个扩展方法
            this.shelfSelected.pushWithoutDuplicate(this.data)
          } else {
            // 选中状态为false表示要取消，待定
            this.setShelfSelected(this.shelfSelected.filter(item => item.sId !== this.data.sId))
          }
        } else {
          // 不是编辑模式时，才会触发点击事件，三种书架列表item类型点击事件
          if (this.data.type === 1) {
            this.showBookDetail(this.data)
          } else if (this.data.type === 2) {
            this.$router.push({
              path: '/store/category',
              query: {
                // 分类的名称
                title: this.data.groupName
              }
            })
          } else {
            // 跳转到书城首页，在store全局样式中定义的
            gotoStoreHome(this)
          }
        }
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
  .shelf-item {
    position: relative;
    width: 100%;
    height: 100%;
    // background: red;
    // 给每个item的框增加阴影
    &.shelf-item-shadow {
      box-shadow: px2rem(4) px2rem(4) px2rem(12) px2rem(4) rgba(200, 200, 200, .3);// x轴 y轴 模糊值 2 2 6 2
    }
    .shelf-item-comp {
      opacity: 1;
      &.is-edit {
        opacity: .5;
      }
    }
    .icon-selected {
      position: absolute;
      bottom: px2rem(4);//2
      right: px2rem(4);//2
      font-size: px2rem(36);// 18
      color: rgba(0, 0, 0, .4);
      &.is-selected {
        color: $color-blue;
      }
    }
  }
</style>
